// 首页如果不做前端跳转拦截，谁都可以进来
// 如果登录了，才能进来，如果没登录，跳转登录页
// 校验登录
checkLogin()

renderUserName()

logout()




getData()
// 获取首页数据
async function getData() {
    let res = await axios({
        url: '/dashboard',
    })
    console.log(res);
    // 渲染看板数据
    renderOverview(res.data.overview)
    // echarts图表渲染
    let lineChart = renderLine(res.data.year)
    let pieChart = renderPie(res.data.salaryData)
    let barChart = renderBar(res.data.groupData)
    let doublePieChart = renderDoublePie()
    let mapChart = renderMap(res.data.provinceData)

    // 注册一次事件(使用闭包解决图表resize问题)
    window.addEventListener('resize', function () {
        // 需要各个图表
        lineChart()
        pieChart()
        barChart()
        doublePieChart()
        mapChart()
    })
}

// 渲染overview
function renderOverview(data) {
    for (let k in data) {
        if (k === 'age') {
            document.querySelector(`.${k}`).innerHTML = data[k].toFixed(2)
        } else {
            document.querySelector(`.${k}`).innerHTML = data[k]
        }
    }
}
// 渲染线形图
function renderLine(data) {
    const myChart = echarts.init(document.querySelector('#line'))

    const option = {
        title: {
            text: '2022全学科薪资走势',
            left: 20,
            top: 10
        },
        grid: {
            top: '16%',
            bottom: '10%',
            left: '10%',
            right: '5%'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data.map(item => item.month),
            axisLine: {
                lineStyle: {
                    type: 'dashed', // 设置X轴为虚线
                    color: '#ccc'   // 设置X轴线条颜色
                }
            }
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 25000,
            interval: 5000,
        },
        series: [
            {
                name: '薪资',
                type: 'line',
                smooth: true, // 平滑曲线
                symbol: 'circle', // 数据点形状为圆形
                symbolSize: 8, // 增大数据点大小
                lineStyle: {
                    width: 4, // 线条宽度
                    color: '#587def'
                },
                itemStyle: {
                    color: '#fff', // 数据点的颜色
                    borderColor: '#587def',
                    borderWidth: 2
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#88c0f4' // 渐变色起始颜色
                    }, {
                        offset: 0.7,
                        color: '#fff' // 渐变色结束颜色
                    }])
                },
                data: data.map(item => item.salary)
            }
        ]
    };
    myChart.setOption(option)
    return function () {
        myChart.resize()
    }
}

// 渲染饼状图
function renderPie(data) {
    const myChart = echarts.init(document.querySelector('#salary'))
    const option = {
        title: {
            text: '班级薪资分布',
            left: '5%', // 标题水平居中
            top: '5%'       // 标题距离顶部的距离
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'horizontal',
            bottom: '0%',
            data: data.map(item => item.label)
        },
        series: [
            {
                name: '薪资分布',
                type: 'pie',
                radius: ['50%', '65%'], // 调整内外半径以减小环形宽度
                center: ['50%', '50%'], // 设置中心位置
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 20, // 设置圆角
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'inside', // 标签显示在内部
                    formatter: '{b}:{c} ({d}%)', // 格式化标签内容
                    fontSize: 14, // 设置字体大小
                    color: '#fff' // 设置字体颜色
                },
                emphasis: {
                    label: {
                        show: false,
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: data.map(item => {
                    return {
                        value: item.g_count + item.b_count,
                        name: item.label
                    }
                })
            }
        ],
        color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a']
    };
    myChart.setOption(option)
    return function () {
        myChart.resize()
    }

}
// 渲染柱状图
function renderBar(data) {
    const myChart = echarts.init(document.querySelector('#lines'))
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            axisLine: {
                lineStyle: {
                    type: 'dashed', // 设置X轴为虚线
                    color: '#ccc'   // 设置X轴线条颜色
                }
            },
            data: data[1].map(item => item.name)
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            min: 0,
            max: 25000,
            interval: 5000
        },
        series: [
            {
                name: '期望薪资',
                type: 'bar',
                data: data[1].map(item => item.hope_salary),
                itemStyle: {
                    color: function (params) {
                        var colorList = ['#4ca0ee', '#4ca0ee66'];
                        return new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [{
                                offset: 0,
                                color: colorList[0] // 起点颜色
                            }, {
                                offset: 1,
                                color: colorList[1] // 终点颜色
                            }]
                        );
                    },
                    borderRadius: [0, 0, 0, 0]
                },
            },
            {
                name: '实际薪资',
                type: 'bar',
                data: data[1].map(item => item.salary),
                itemStyle: {
                    color: function (params) {
                        var colorList = ['#37d49c', '#37d49c66'];
                        return new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [{
                                offset: 0,
                                color: colorList[0] // 起点颜色
                            }, {
                                offset: 1,
                                color: colorList[1] // 终点颜色
                            }]
                        );
                    },
                    borderRadius: [0, 0, 0, 0]
                },
            }
        ]
    };
    myChart.setOption(option)

    document.querySelector('#btns').addEventListener('click', function (e) {
        if (e.target.tagName === 'BUTTON') {
            // 点击高亮
            document.querySelector('.btn-blue').classList.remove('btn-blue')
            e.target.classList.add('btn-blue')
            // 数据更新
            // 把原来option中的数据修改了
            option.xAxis.data = data[e.target.innerHTML].map(item => item.name)
            option.series[0].data = data[e.target.innerHTML].map(item => item.hope_salary)
            option.series[1].data = data[e.target.innerHTML].map(item => item.salary)
            // 重新应用option
            myChart.setOption(option)
        }
    })
    return function () {
        myChart.resize()
    }

}
// 渲染双饼图
function renderDoublePie() {
    const myChart = echarts.init(document.querySelector('#gender'))
    const datas = [
        ////////////////////////////////////////
        [
            { name: '圣彼得堡来客', value: 5.6 },
            { name: '陀思妥耶夫斯基全集', value: 1 },
            { name: '史记精注全译（全6册）', value: 0.8 },
            { name: '加德纳艺术通史', value: 0.5 },
            { name: '表象与本质', value: 0.5 },
            { name: '其它', value: 3.8 }
        ],
        // ////////////////////////////////////////
        [
            { name: '银河帝国5：迈向基地', value: 3.8 },
            { name: '俞军产品方法论', value: 2.3 },
            { name: '艺术的逃难', value: 2.2 },
            { name: '第一次世界大战回忆录（全五卷）', value: 1.3 },
            { name: 'Scrum 精髓', value: 1.2 },
            { name: '其它', value: 5.7 }
        ]
        ////////////////////////////////////////
    ];
    const option = {
        title: {
            text: '阅读书籍分布',
            left: 'center',
            textStyle: {
                color: '#999',
                fontWeight: 'normal',
                fontSize: 14
            }
        },
        series: datas.map(function (data, idx) {
            var top = idx * 33.3;
            return {
                type: 'pie',
                radius: [20, 60],
                top: top + '%',
                height: '33.33%',
                left: 'center',
                width: 400,
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                label: {
                    alignTo: 'edge',
                    formatter: '{name|{b}}\n{time|{c} 小时}',
                    minMargin: 5,
                    edgeDistance: 10,
                    lineHeight: 15,
                    rich: {
                        time: {
                            fontSize: 10,
                            color: '#999'
                        }
                    }
                },
                labelLine: {
                    length: 15,
                    length2: 0,
                    maxSurfaceAngle: 80
                },
                labelLayout: function (params) {
                    const isLeft = params.labelRect.x < myChart.getWidth() / 2;
                    const points = params.labelLinePoints;
                    // Update the end point.
                    points[2][0] = isLeft
                        ? params.labelRect.x
                        : params.labelRect.x + params.labelRect.width;
                    return {
                        labelLinePoints: points
                    };
                },
                data: data
            };
        })
    };
    myChart.setOption(option)
    return function () {
        myChart.resize()
    }
}
// 渲染地图
function renderMap(data) {
    const myChart = echarts.init(document.querySelector('#map'));
    const max = Math.max(...data.map(item => item.value))
    const option = {
        // 地图的指示器
        visualMap: {
            min: 0,
            max,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'],
            calculable: false,
            orient: 'horizontal',
            inRange: {
                color: ['#e0ffff', '#006edd'],
                symbolSize: [30, 100]
            }
        },
        // 鼠标移入组件时的提示
        tooltip: {
            padding: 8,
            transitionDuration: 1,
            textStyle: {
                decoration: 'none',
            }
        },
        // 系列(数据)
        series: [{
            name: '就业学生数量',
            type: 'map',
            mapType: 'china',
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    }
                },
                emphasis: {
                    label: {
                        show: true
                    }
                }
            },
            label: {
                normal: { //静态的时候展示样式
                    show: true, //是否显示地图省份得名称
                    textStyle: {
                        color: "#fff",
                        fontSize: 12
                    }
                },
                emphasis: { //动态展示的样式
                    color: '#fff',
                },
            },
            data: [{
                name: '北京',
                value: 0,
            },
            {
                name: '天津',
                value: 0,
            },
            {
                name: '上海',
                value: 0,
            },
            {
                name: '重庆',
                value: 0,
            },
            {
                name: '河北',
                value: 0,
            },
            {
                name: '河南',
                value: 0,
            },
            {
                name: '云南',
                value: 0,
            },
            {
                name: '辽宁',
                value: 0,
            },
            {
                name: '黑龙江',
                value: 0,
            },
            {
                name: '湖南',
                value: 0,
            },
            {
                name: '安徽',
                value: 0,
            },
            {
                name: '山东',
                value: 0,
            },
            {
                name: '新疆',
                value: 0,
            },
            {
                name: '江苏',
                value: 0,
            },
            {
                name: '浙江',
                value: 0,
            },
            {
                name: '江西',
                value: 0,
            },
            {
                name: '湖北',
                value: 0,
            },
            {
                name: '广西',
                value: 0,
            },
            {
                name: '甘肃',
                value: 0,
            },
            {
                name: '山西',
                value: 0,
            },
            {
                name: '内蒙古',
                value: 0,
            },
            {
                name: '陕西',
                value: 0,
            },
            {
                name: '吉林',
                value: 0,
            },
            {
                name: '福建',
                value: 0,
            },
            {
                name: '贵州',
                value: 0,
            },
            {
                name: '广东',
                value: 0,
            },
            {
                name: '青海',
                value: 0,
            },
            {
                name: '西藏',
                value: 0,
            },
            {
                name: '四川',
                value: 0,
            },
            {
                name: '宁夏',
                value: 0,
            },
            {
                name: '海南',
                value: 0,
            },
            {
                name: '台湾',
                value: 0,
            },
            {
                name: '香港',
                value: 0,
            },
            {
                name: '澳门',
                value: 0,
            }
            ]
        },]
    }
    // 根据接口的数据，修改option中series的data
    const newData = option.series[0].data.map(item => {
        // item是初始化地图数据的每一项
        // item在接口数据中查找
        const city = data.find(city => {
            return city.name.includes(item.name)
        })
        return {
            name: item.name,
            value: city ? city.value : 0
        }
    })
    option.series[0].data = newData
    myChart.setOption(option);
    return function () {
        myChart.resize()
    }
}